import { Col, Icon, Input, Rate, Row, Spin } from "antd";
import { Card, ListView, Tabs } from "antd-mobile";
import { addon } from "pao-aop";
import { reactControl, ReactView, ReactViewControl, ReactViewState } from "pao-aop-client";
import React from "react";
import { getWebViewRetObjectType, setMainFormTitle, subscribeWebViewNotify } from "src/business/util_tool";
import { AppServiceUtility } from "src/projects/app/appService";
import { ROUTE_PATH } from "src/projects/app/util-tool";
import './index.less';
const { Search } = Input;
const tabs = [
    { title: '距离' },
    { title: '入住率' },
    { title: '关注度' },
];
function MyBody(props: any) {
    return (
        <div className="am-list-body my-body" style={{ height: '100%' }}>
            {props.children}
        </div>
    );
}
/**
 * 组件：养老院列表视图控件状态
 */
export interface BeadhouseListViewState extends ReactViewState {

    /** 长列表数据 */
    dataSource?: any;
    /** 请求的数据 */
    list?: any;
    /** 上拉加载 */
    upLoading?: boolean;
    /** 下拉刷新 */
    pullLoading?: boolean;
    /** 长列表容器高度 */
    height?: any;
    location?: any;
    animating?: any;
    notice?: string;
}
/**
 * 组件：养老院列表视图控件
 */
export class BeadhouseListView extends ReactView<BeadhouseListViewControl, BeadhouseListViewState> {
    first_in: boolean;

    constructor(props: any) {
        super(props);
        this.first_in = true;
        const ds = new ListView.DataSource({
            rowHasChanged: (r1: any, r2: any) => r1 !== r2
        });
        this.state = {
            dataSource: ds,
            list: [],
            upLoading: false,
            pullLoading: false,
            height: document.documentElement!.clientHeight,
            location: undefined,
            animating: false,
            notice: '正在加载',
        };
    }

    componentDidMount() {
        // 监听app端通知
        if ((window as any).ReactNativeWebView) {
            const messageCb = (e: any) => {
                const retObject = JSON.parse(e.data);
                if (getWebViewRetObjectType(retObject) === 'getPhonePosition') {
                    const location = retObject.data;
                    if (location === undefined) {
                        // Toast.fail('获取位置信息失败');
                    }
                    this.setState({
                        location: retObject.data
                    });
                    if (this.first_in) {
                        AppServiceUtility.person_org_manage_service.get_all_organization_list!({ personnel_category: '福利院', sortByDistance: true, ...location })!
                            .then((data: any) => {
                                if (data.result.length === 0) {
                                    this.setState({
                                        notice: '暂无数据',
                                    });
                                }
                                this.setState({
                                    list: data.result,
                                    animating: true
                                });
                            });
                        this.first_in = false;
                    }
                }
            };
            if ((window as any).ReactNativeWebView) {
                subscribeWebViewNotify(messageCb);
            }

            this.getPhonePosition();
        } else {
            this.handletab({ title: '距离' });
        }
    }

    getPhonePosition() {
        // Toast.info('认证成功：' + e.data);
        if ((window as any).ReactNativeWebView) {
            (window as any).ReactNativeWebView.postMessage(
                JSON.stringify({
                    function: 'getPhonePosition',
                    params: undefined
                })
            );
        }
    }

    onstop = (id: any) => {
        this.props.history!.push(ROUTE_PATH.beadhouseInfo + '/' + id);
    }

    handletab(e: any) {
        let condition: Object = {};
        if (e.title === '距离') {
            condition['sortByDistance'] = true;
        }
        if (e.title === '入住率') {
            condition['sort'] = '入住率';
        }
        if (e.title === '关注度') {
            condition['sort'] = '关注度';
        }

        AppServiceUtility.person_org_manage_service.get_all_organization_list!({ personnel_category: '福利院', ...condition, ...this.state.location })!
            .then((data: any) => {
                if (data.result.length === 0) {
                    this.setState({
                        notice: '暂无数据',
                    });
                }
                this.setState({
                    list: data.result
                });
                console.log(data);
            });
    }

    search = (value: any) => {
        AppServiceUtility.person_org_manage_service.get_all_organization_list!({ personnel_category: '福利院', name: value })!
            .then((data: any) => {
                if (data.result.length === 0) {
                    this.setState({
                        notice: '暂无数据',
                    });
                }
                this.setState({
                    list: data.result
                });
                console.log(data);
            });
    }
    render() {
        const { list, dataSource, } = this.state;
        setMainFormTitle('养老机构');
        // 获取item进行展示
        const renderRow = (owData: any, sectionID: any, rowID: any) => {
            return (
                <div>
                    <Card className='list-conten' onClick={() => this.onstop(owData.id)}>
                        <Row type='flex' justify='center'>
                            <Col className='list-col' span={10}><img src={owData.organization_info.picture_list && owData.organization_info.picture_list.length > 0 ? owData.organization_info.picture_list[0] : ''} style={{ height: '72pt', width: '100pt' }} /></Col>
                            <Col span={14} className='list-col'>
                                <Row><strong>{owData.name}</strong></Row>
                                <Row style={{ fontSize: '12px' }}>
                                    <Rate character={<Icon style={{ fontSize: "14px" }} type="star" theme="filled" />} allowHalf={true} disabled={true} value={owData['organization_info'] && owData['organization_info']['star_level'] ? Number(owData['organization_info']['star_level']) : 4} />
                                    <span style={{ marginLeft: '20px' }}>入住率：{owData.organization_info.chenk_in_probability}%</span>
                                </Row>
                                <Row>
                                    86123456
                                </Row>
                                <Row style={{ fontSize: '10px' }}>

                                    <span
                                        style={{
                                            wordBreak: 'break-all',
                                            textOverflow: 'ellipsis',
                                            overflow: 'hidden',
                                            display: ' -webkit-box',
                                            WebkitLineClamp: 1,
                                            WebkitBoxOrient: 'vertical',
                                        }}
                                    >
                                        公办  {owData.organization_info.address}
                                    </span>
                                </Row>
                                <Row>
                                    <Col span={12}>{owData.town} {owData.distance ? '| ' + owData.distance.toFixed(2) + 'km' : ''}</Col>
                                    <Col span={12} style={{ textAlign: 'right' }}>
                                        <span style={{ marginRight: '10px' }}>
                                            <Icon type="heart" theme="filled" style={{ marginRight: '5px' }} />{owData.follow_count}
                                        </span>
                                    </Col>
                                </Row>
                            </Col>
                        </Row>
                    </Card>
                </div>
            );
        };
        return (
            <Row>
                <div style={{ height: '50px', }}>
                    <Search
                        placeholder="搜索机构"
                        onSearch={this.search}
                        style={{ width: '100%', height: '40px', marginTop: '3px' }}
                    />
                </div>
                <Tabs
                    tabs={tabs}
                    initialPage={0}
                    onChange={this.handletab = this.handletab.bind(this)}
                >
                    <div className='tabs-content'>
                        {
                            list && list.length ?
                                <ListView
                                    ref={el => this['lv'] = el}
                                    dataSource={dataSource.cloneWithRows(list)}
                                    renderRow={renderRow}
                                    initialListSize={10}
                                    pageSize={10}
                                    renderBodyComponent={() => <MyBody />}
                                    style={{ height: this.state.height }}
                                />
                                :
                                <div style={{ textAlign: 'center', margin: '20px' }}>
                                    <Spin size="large" />
                                </div>
                        }
                        {this.state.list.length === 0 && this.state.animating === true ?
                            <Row className='tabs-content' type='flex' justify='center'>
                                {this.state.notice}
                            </Row>
                            :
                            ''
                        }
                    </div>
                    <div className='tabs-content'>
                        {
                            list && list.length ?
                                <ListView
                                    ref={el => this['lv'] = el}
                                    dataSource={dataSource.cloneWithRows(list)}
                                    renderRow={renderRow}
                                    initialListSize={10}
                                    pageSize={10}
                                    renderBodyComponent={() => <MyBody />}
                                    style={{ height: this.state.height }}
                                />
                                :
                                <div style={{ textAlign: 'center', margin: '20px' }}>
                                    <Spin size="large" />
                                </div>
                        }
                        {this.state.list.length === 0 && this.state.animating === true ?
                            <Row className='tabs-content' type='flex' justify='center'>
                                {this.state.notice}
                            </Row>
                            :
                            ''
                        }
                    </div>
                    <div className='tabs-content'>
                        {
                            list && list.length ?
                                <ListView
                                    ref={el => this['lv'] = el}
                                    dataSource={dataSource.cloneWithRows(list)}
                                    renderRow={renderRow}
                                    initialListSize={10}
                                    pageSize={10}
                                    renderBodyComponent={() => <MyBody />}
                                    style={{ height: this.state.height }}
                                />
                                :
                                <div style={{ textAlign: 'center', margin: '20px' }}>
                                    <Spin size="large" />
                                </div>
                        }
                        {this.state.list.length === 0 && this.state.animating === true ?
                            <Row className='tabs-content' type='flex' justify='center'>
                                {this.state.notice}
                            </Row>
                            :
                            ''
                        }
                    </div>
                </Tabs>
            </Row>
        );
    }
}

/**
 * 组件：养老院列表视图控件
 * 控制养老院列表视图控件
 */
@addon('BeadhouseListView', '养老院列表视图控件', '控制养老院列表视图控件')
@reactControl(BeadhouseListView, true)
export class BeadhouseListViewControl extends ReactViewControl {
    constructor() {
        super();
    }
}